<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>WebSocket/SockJS Example</title>
<style type="text/css">

#message-container{
	width:500px;
	border:1px solid #ccc;
	margin:10px auto;
}

#connect-container {
	width: 100%;
	border:1px solid #ccc;
}

#chat-container {
	border: 1px solid #ccc;
	height: 400px;
	overflow-y: scroll;
	padding: 5px;
	
}

#send-container{
	width:100%;
	height:150px;
	border:1px solid #ccc;
}

#writeMessage{
	width:99%;
	height:80px;
}

#sendBtn{
	width:100px;
	height:30px;
}

</style>


</head>
<body>
	<noscript>
		<h2 style="color: #ff0000">检测到你的浏览器未启用JavaScript,请启用后刷新浏览器即可使用!</h2>
	</noscript>
	
	<div id="message-container">
			
			<div id="connect-container">
				<p>
					<input id="websocketRadio" type="radio" name="websocketChoice" checked/> 
					<label for="radio1">WebSocket</label>
					<input id="socketJsRadio" type="radio" name="websocketChoice"/> 
					<label for="radio2">SockJS</label>
				</p>
				<p>
					<button id="connect">Connect</button>
					<button id="disconnect" disabled="disabled">Disconnect</button>
				</p>
			</div>
			
			<div id="chat-container">
				
			</div>
			<div id="send-container">
				<textarea id="writeMessage">Default Send Message....</textarea>
				<p>
					<button id="sendBtn" onclick="echo();" disabled="disabled">Send</button>
				</p>
			</div>
		</div>
	
	<script type="text/javascript" src="${pageContext.request.contextPath}
	/res/plugins/jquery/jquery-2.2.0.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/res/js/sockjs-0.3.4.js"></script>
	<script type="text/javascript">
		var ws = null;
		var url = "ws://localhost:9988/spring-websocket/websocket";
		
		$(function(){
			$("#websocketRadio").click(function(){
				url = "ws://localhost:9988/spring-websocket/websocket";
			});
			$("#socketJsRadio").click(function(){
				url = "ws://localhost:9988/spring-websocket/websocket/socketjs";
			});
			$("#connect").click(function(){
				connect();
			});
			$("#disconnect").click(function(){
				disconnect();
			});
		});
		
		
		function connect() {
			if (!url) {
				alert('请设置访问的url');
				return;
			}
			
			var websocketRadioChecked = $("#websocketRadio")[0].checked;
			if(websocketRadioChecked){
				ws = new WebSocket(url);
			}else{
				ws = new SockJS(url, undefined, {protocols_whitelist : transports})
			}

			ws.onopen = function() {
				setConnected(true);
				log('连接成功');
			};
			ws.onmessage = function(event) {
				console.log(event);
				console.log(event.data);
				var obj = JSON.parse(event.data);
				console.log(obj);
				log('Received: ' + event.data);
			};
			ws.onclose = function(event) {
				setConnected(false);
				log('Info: connection closed.');
				log(event);
			};
		}
		
		function setConnected(connected) {
			$('#connect').attr("disabled",connected);
			$('#disconnect').attr("disabled",!connected);
			$('#sendBtn').attr("disabled",!connected);
		}
		
		function disconnect() {
			if (ws != null) {
				ws.close();
				ws = null;
			}
			setConnected(false);
		}
		
		function echo() {
			if (ws != null) {
				var message = $('#writeMessage').val();
				log('Send: ' + message);
				ws.send(message);
			} else {
				alert('连接失败.');
			}
		}
		
		function log(message) {
			var showMessageArea = $('#chat-container');
			$("<p/>",{
				text : message
			}).appendTo(showMessageArea);
			
			showMessageArea[0].scrollTop = showMessageArea[0].scrollHeight;
		}
		
	</script>
</body>
</html>
